<!DOCTYPE html>
<html lang="en">
<head>
    <title>FORT - 抽奖管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">

    <!-- External CSS libraries -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-submenu.css">

    <link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css">
    <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/leaflet.css" type="text/css">
    <link rel="stylesheet" href="css/map.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="fonts/flaticon/font/flaticon.css">
    <link rel="stylesheet" type="text/css" href="fonts/linearicons/style.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" type="text/css" href="css/dropzone.css">
    <link rel="stylesheet" type="text/css" href="css/slick.css">

    <!-- Custom stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" id="style_sheet" href="css/skins/default.css">

    <!-- Favicon icon -->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link rel="stylesheet" type="text/css" href="css/ie10-viewport-bug-workaround.css">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/jquery-2.2.0.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-submenu.js"></script>
    <script src="js/rangeslider.js"></script>
    <script src="js/jquery.mb.YTPlayer.js"></script>
    <script src="js/bootstrap-select.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.scrollUp.js"></script>
    <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/leaflet.js"></script>
    <script src="js/leaflet-providers.js"></script>
    <script src="js/leaflet.markercluster.js"></script>
    <script src="js/dropzone.js"></script>
    <script src="js/slick.min.js"></script>
    <script src="js/jquery.filterizr.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/jquery.countdown.js"></script>
    <script src="js/maps.js"></script>
    <!--<script  src="js/app.js"></script>-->

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <!-- Custom javascript -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
</head>
<body>
<!-- Main header start -->
<header class="main-header fixed-header-2">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand company-logo" href="/index">
                <img src="img/logos/black-logo.png" alt="logo">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav header-ml">
                    <li class="nav-item dropdown active">
                        <a class="nav-link " href="/activity" id="navbarDropdownMenuLink">
                            活动广场
                        </a>
                    </li>

                    <li class="nav-item dropdown active" id="myself">

                    </li>

                    <li class="nav-item dropdown active" id="admin_center">

                    </li>

                    <li class="nav-item dropdown megamenu-li">
                        <a class="nav-link " href="/about">关于我们</a>
                    </li>
                    <li class="nav-item dropdown megamenu-li">
                        <a class="nav-link " href="/contact">与管理员联系</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto" id="status">

                </ul>
            </div>
        </nav>
    </div>
</header>
<!-- Main header end -->
<!-- Dashboard start -->
<div class="dashboard">
    <div class="container-fluid">
        <div class="row">

            <div class="col-lg-12 col-md-12 col-sm-12 col-pad">
                <div class="content-area5">
                    <div class="dashboard-content">
                        <div class="dashboard-list">
                            <h3>我发布的抽奖活动
                                <button type="button" class="btn btn-primary" style="float: right" id="create"> 新增
                                </button>
                            </h3>
                            <table class="manage-table" id="lottery_list">
                                <tbody>

                                </tbody>
                            </table>


                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page navigation start -->
        <div class="pagination-box hidden-mb-45 text-center" id="page_nav_area">

        </div>
    </div>
</div>
<!-- Dashboard end -->


<!--创建抽奖的模态框-->
<div class="modal" id="createModal" tabindex="-1" role="dialog">
    <div class="modal-dialog " style="max-width: 1300px" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">创建抽奖活动</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="form-group ">
                                <label>抽奖标题</label>
                                <input type="text" name="lotteryTitle" class="form-control"
                                       id="lotteryTitle">
                            </div>
                        </div>
                        <div class=" col-md-6">
                            <div class="form-group ">
                                <label>开始时间</label>
                                <input type="datetime-local" name="startTime" class="form-control"
                                       id="startTime">
                            </div>
                        </div>
                        <div class=" col-md-6">
                            <div class="form-group ">
                                <label>截止时间</label>
                                <input type="datetime-local" name="dueTime" class="form-control"
                                       id="dueTime">
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="form-group  ">
                                <label>抽奖介绍</label>
                                <textarea class="form-control" name="lotteryExplain"
                                          id="lotteryExplain" rows="7"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3">
                            <div class="form-group ">
                                <label>最低参与人数</label>
                                <input type="number" name="minimumPerson" class="form-control"
                                       id="minimumPerson">
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div>
                        <p style="color: red" class="lead ">以下是奖品部分
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" id="remove" style="float: right">删除</button>
                            <button type="button" class="btn btn-primary" id="add" style="float: right">添加</button>
                        </div>
                        </p>
                    </div>
                    <table id="prize" class="table table-bordered" width="100%" cellspacing="0">
                        <thead>
                        <tr>
                            <th style="width: 200px">奖项</th>
                            <th style="width: 100px">数量</th>
                            <th style="width: 450px">内容</th>
                            <th style="width: 400px">图片</th>
                            <th style="width: 300px">操作</th>
                        </tr>
                        </thead>
                        <tbody id="prize_tbody">
                        <tr>
                            <th style="width: 200px"><input type="text" class="form-control" name="prizeLevel0"
                                                            id="prizeLevel0"></th>
                            <th style="width: 100px"><input type="number" class="form-control" name="prizeNums0"
                                                            id="prizeNums0"></th>
                            <th style="width: 450px"><input type="text" class="form-control" name="prizeContent0"
                                                            id="prizeContent0"></th>
                            <th style="width: 400px">
                                <div class="col-lg-8" id="imag0"></div>
                            </th>
                            <th style="width: 300px"><input type="file" class="form-control upload" name="prizeImag0"
                                                            id="prizeImag0"
                                                            accept="image/*"></th>
                        </tr>
                        </tbody>
                    </table>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--修改抽奖的模态框-->
<div class="modal" id="updateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog " style="max-width: 1300px" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑抽奖活动</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row">
                        <div class="col-lg-12 col-md-12" hidden>
                            <div class="form-group ">
                                <label>id</label>
                                <input type="text" name="update_id" class="form-control"
                                       id="update_id">
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12">
                            <div class="form-group ">
                                <label>抽奖标题</label>
                                <input type="text" name="update_lotteryTitle" class="form-control"
                                       id="update_lotteryTitle">
                            </div>
                        </div>
                        <div class=" col-md-6">
                            <div class="form-group ">
                                <label>开始时间</label>
                                <input type="datetime-local" name="update_startTime" class="form-control"
                                       id="update_startTime">
                            </div>
                        </div>
                        <div class=" col-md-6">
                            <div class="form-group ">
                                <label>截止时间</label>
                                <input type="datetime-local" name="update_dueTime" class="form-control"
                                       id="update_dueTime">
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="form-group  ">
                                <label>抽奖介绍</label>
                                <textarea class="form-control" name="update_lotteryExplain"
                                          id="update_lotteryExplain" rows="7"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3">
                            <div class="form-group ">
                                <label>最低参与人数</label>
                                <input type="number" name="update_minimumPerson" class="form-control"
                                       id="update_minimumPerson">
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div>
                        <p style="color: red" class="lead ">以下是奖品部分
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" id="update_remove" style="float: right">删除
                            </button>
                            <button type="button" class="btn btn-primary" id="update_add" style="float: right">添加
                            </button>
                        </div>
                        </p>
                    </div>
                    <table id="update_prize" class="table table-bordered" width="100%" cellspacing="0">
                        <thead>
                        <tr>
                            <th style="width: 200px">奖项</th>
                            <th style="width: 100px">数量</th>
                            <th style="width: 450px">内容</th>
                            <th style="width: 400px">图片</th>
                            <th style="width: 300px">操作</th>
                        </tr>
                        </thead>
                        <tbody id="update_prize_tbody">

                        </tbody>
                    </table>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="update_submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--抽奖记录的模态框-->
<div class="modal" id="lotteryRecordModal" tabindex="-1" role="dialog">
    <div class="modal-dialog  modal-dialog-scrollable" style="max-width: 1200px" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    抽奖记录
                </h5>
                <button type="button" class="btn btn-primary" id="exportRecord" style="float: right">导出excel
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <table class="table table-hover table-bordered" id="record_table">
                        <thead>
                        <tr>
                            <th>活动名</th>
                            <th>姓名</th>
                            <th>是否中奖</th>
                            <th>奖品等级</th>
                            <th>奖品内容</th>
                            <th>创建时间</th>
                            <th>手机号</th>
                            <th>邮箱</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--中奖记录的模态框-->
<div class="modal" id="lotteryWinModal" tabindex="-1" role="dialog">
    <div class="modal-dialog  modal-dialog-scrollable" style="max-width: 1200px" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    中奖纪录
                </h5>
                <button type="button" class="btn btn-primary" id="exportWin" style="float: right">导出excel</button>
            </div>
            <div class="modal-body">
                <form>
                    <table class="table table-hover table-bordered" id="win_table">
                        <thead>
                        <tr>
                            <th>活动名</th>
                            <th>姓名</th>
                            <th>奖品等级</th>
                            <th>奖品内容</th>
                            <th>创建时间</th>
                            <th>手机号</th>
                            <th>邮箱</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>

    const token = localStorage.getItem("token");
    const storeUserNo = localStorage.getItem("userNo");

    $(function f() {
        //token存在
        if (token != null && token != '') {
            $.ajax({
                url: "http://localhost:5761/lottery-system-user/user/api/user/testToken",
                // url: "http://localhost:5710/user/api/user/testToken?token=" + token,
                type: "GET",
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token", token);
                },
                success: function (result) {
                    // console.log(result);
                    if (result.data.userType != 1) {
                        alert("您还不是商家，无法使用该功能！！！");
                        return window.location.href = "http://localhost/index";
                    }
                    if (result.code == 999) {
                        alert(result.message);
                        localStorage.removeItem("token");
                        localStorage.removeItem("userNo");
                        document.getElementById("status").className = "navbar-nav ml-auto";
                        var content = "<li class='nav-item'><a class='nav-link' href='/login'>您好，请登录</a></li>" +
                            "<li class='nav-item'><a class='nav-link' href='/register' style='color:red'>免费注册</a></li>";
                        $("#status").append(content);
                        return;
                    }
                    if (result.code == 200) {
                        //正常
                        $("#myself").append("<a class='nav-link' href='/my-profile'>个人中心</a>");
                        var url = result.data.headImgUrl;
                        document.getElementById("status").className = "navbar-buttons ml-auto d-none d-xl-block d-lg-block";
                        var content = "<div><ul><li>" +
                            "<div class='dropdown btns'>" +
                            "<a class='dropdown-toggle' data-toggle='dropdown' id='username'></a>" +
                            "<div class='dropdown-menu'>" +
                            "<a class='dropdown-item' href='/forgot-password'>重置密码</a>" +
                            "<a class='dropdown-item' id='logout'>退出</a>" +
                            "</div></div></li></ul></div>";
                        $("#status").append(content);
                        document.getElementById("username").innerHTML = "<img src=" + url + " alt='avatar' >" + result.data.username;
                        //退出
                        $("#logout").click(function () {
                            localStorage.removeItem("token");
                            window.location.href = "http://localhost/login";
                        });
                        //如果是商家身份，则添加菜单
                        if (result.data.userType == 1) {
                            $("#admin_center").append("<a class='nav-link ' href='/lottery_management' >管理中心</a>");
                            to_page(storeUserNo, 1);
                            // getLotterys(storeUserNo);
                        }
                        return;
                    } else {
                        //token过期或异常
                        document.getElementById("status").className = "navbar-nav ml-auto";
                        var content = "<li class='nav-item'><a class='nav-link' href='/login'>您好，请登录</a></li>" +
                            "<li class='nav-item'><a class='nav-link' href='/register' style='color:red'>免费注册</a></li>";
                        $("#status").append(content);
                        localStorage.removeItem("token");
                        localStorage.removeItem("userNo");
                        return window.location.href = "http://localhost/login";
                    }
                }
            });
        } else {
            //token不存在
            document.getElementById("status").className = "navbar-nav ml-auto";
            var content = "<li class='nav-item'><a class='nav-link' href='/login'>您好，请登录</a></li>" +
                "<li class='nav-item'><a class='nav-link' href='/register' style='color:red'>免费注册</a></li>";
            $("#status").append(content);
            return window.location.href = "http://localhost/login";
        }
    });

    function to_page(storeUserNo, pageNum) {
        $.ajax({
            url: "http://localhost:5761/lottery-system-lottery/lottery/api/auth/lottery/lottery/" + storeUserNo,
            type: "GET",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            data: "pageNum=" + pageNum,
            success: function (result) {
                // console.log(result);
                getLotterys(result);
                build_page_nav(result);
            }
        });
    }

    function getLotterys(result) {
        // console.log(result);
        $("#lottery_list tbody").empty();
        var list = result.data.list;
        // console.log(list);
        $.each(list, function (index, item) {
            var imagTd = $("<td class='listing-photoo'></td>");

            var carouseTd = $("<div id='carouselExampleIndicators" + index + "' class='carousel slide col-lg-12' data-ride='carousel'></div>");

            var olnumTd = $("<ol class='carousel-indicators'  id='olnum" + index + "'></ol>");

            var lunbotuTd = $("<div class='carousel-inner' id='lunbotu" + index + "'></div>");

            var imagList = item.prizeDTOList;
            // console.log(imagList);
            $.each(imagList, function (imag_index, imag_item) {
                if (imag_index == 0) {
                    $("<li class='active' data-target='#carouselExampleIndicators" + index + "' data-slide-to=" + imag_index + "></li>").appendTo(olnumTd);
                    $("<div class='carousel-item active'><img alt='...' class='d-block w-100' src=" + imag_item.prizeImagUrl + " /></div>").appendTo(lunbotuTd);
                } else {
                    $("<li data-target='#carouselExampleIndicators" + index + "' data-slide-to=" + imag_index + "></li>").appendTo(olnumTd);
                    $("<div class='carousel-item '><img alt='...' class='d-block w-100' src=" + imag_item.prizeImagUrl + " /></div>").appendTo(lunbotuTd);
                }
            });
            olnumTd.appendTo(carouseTd);
            lunbotuTd.appendTo(carouseTd);
            carouseTd.appendTo(imagTd);

            var titleTd = $("<td class='title-container'><h2><a href='/activity-details?id=" + item.id + "'>" + item.lotteryTitle + "</a></h2><h5 class='d-none d-xl-block d-lg-block d-md-block'>" + item.startTime + "~" + item.dueTime + "</h5></td>");
            var statusTd = $("<td class='expire-date' style='color: red'></td>").append(item.lotteryStatus == 0 ? '未开奖' : '已开奖');
            if (item.auditStatus == 0) {
                var auditTd = $("<p style='color:red;'>待审核</p>");
                var editBtn = $("<button class='btn btn-xs btn-primary edit_btn' disabled><i class='fa fa-edit'></i>&nbsp;编&nbsp;辑</button>")
            }
            if (item.auditStatus == 1) {
                var auditTd = $("<p style='color:red;'>审核通过</p>");
                var editBtn = $("<button class='btn btn-xs btn-primary edit_btn' disabled><i class='fa fa-edit'></i>&nbsp;编&nbsp;辑</button>")
            }
            if (item.auditStatus == -1) {
                var auditTd = $("<p style='color:red;'>审核不通过</p>");
                var editBtn = $("<button class='btn btn-xs btn-primary edit_btn' ><i class='fa fa-edit'></i>&nbsp;编&nbsp;辑</button>")
            }
            editBtn.attr("edit_id", item.id);
            var opinionTd = $("<td class='action'></td>").append(auditTd).append(editBtn);

            var lotteryRecordBtn = $("<button class='btn btn-xs btn-success record_btn' style='background-color: #1e90ff;border-color: #1e90ff'><i class='fa fa-th-list'></i>抽奖记录</button>");
            lotteryRecordBtn.attr("record_id", item.id);
            var lotteryRecordTd = $("<td class='action'><p>.</p></td>").append(lotteryRecordBtn);

            var winRecordBtn = $("<button class='btn btn-xs btn-success win_btn' style='background-color: #ff521e;border-color: #ff521e'><i class='fa fa-th-list'></i>中奖记录</button>");
            winRecordBtn.attr("win_id", item.id);
            var winRecordTd = $("<td class='action'><p>.</p></td>").append(winRecordBtn);

            if (item.lotteryStatus == 0) {
                var drawBtn = $("<button class='btn btn-xs btn-success draw_btn' >&nbsp;开&nbsp;奖</button>")
            }
            if (item.lotteryStatus == 1) {
                var drawBtn = $("<button class='btn btn-xs btn-success draw_btn' disabled>&nbsp;开&nbsp;奖</button>")
            }
            drawBtn.attr("draw_id", item.id);
            var drawTd = $("<td class='action'><p>.</p></td>").append(drawBtn);

            $("<tr class='responsive-table'></tr>").append(imagTd).append(titleTd).append(statusTd).append(opinionTd).append(lotteryRecordTd).append(winRecordTd).append(drawTd).appendTo("#lottery_list tbody");
        });
    }

    function build_page_nav(result) {
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        //上一页
        var prePageLi = $("<li></li>").append($("<a></a>").addClass("page-link").append("&laquo;"));
        if (result.data.hasPreviousPage == false) {
            prePageLi.addClass("page-item disabled");
        } else {
            prePageLi.click(function () {
                to_page(storeUserNo, result.data.pageNum - 1);
            });
        }
        //下一页
        var nextPageLi = $("<li></li>").append($("<a></a>").addClass("page-link").append("&raquo;"));
        if (result.data.hasNextPage == false) {
            nextPageLi.addClass("page-item disabled");
        } else {
            nextPageLi.click(function () {
                to_page(storeUserNo, result.data.pageNum + 1);
            });
        }
        ul.append(prePageLi);
        $.each(result.data.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").addClass("page-link").append(item));
            if (result.data.pageNum == item) {
                numLi.addClass("page-item active");
            }
            numLi.click(function () {
                to_page(storeUserNo, item);
            });
            ul.append(numLi);
        });
        ul.append(nextPageLi);
        var navEle = $("<nav aria-label='Page navigation example'></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    $("#create").click(function () {
        $("#createModal form")[0].reset();
        $("#createModal").modal({
            backdrop: "static"
        });
    });

    $("#prizeImag0").change(function () {
        var file = document.getElementById("prizeImag0").files[0];
        var formData = new FormData();
        formData.append("userNo", storeUserNo);
        formData.append("file", file);
        $.ajax({
            url: "http://localhost:5761/lottery-system-system/system/api/auth/upload/imag",
            // url: "http://localhost:5730/system/api/upload/headImag",
            type: 'POST',
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            async: false,
            success: function (result) {
                // console.log(result);
                if (result.code == 200) {
                    //预览图片
                    $("#imag0").empty();
                    $("#imag0").append("<img src=" + result.data + " alt='profile-photo' class='img-fluid' id='prizeImagUrl0' name='prizeImagUrl0'>");
                    document.getElementById("prizeImagUrl0").style.cursor = "pointer";
                    document.getElementById("prizeImagUrl0").onclick = function () {
                        window.open(result.data);
                    };
                }
            }
        });
    });

    var index = 1;
    $("#add").click(function () {
        $("<tr>" +
            "<th style='width: 200px'><input type='text' class='form-control' name='prizeLevel" + index + "' id='prizeLevel" + index + "'></th>" +
            "<th style='width: 100px'><input type='number' class='form-control' name='prizeNums" + index + "' id='prizeNums" + index + "'></th>" +
            "<th style='width: 450px'><input type='text' class='form-control' name='prizeContent" + index + "' id='prizeContent" + index + "'></th>" +
            "<th style='width: 400px'><div class='col-lg-9 ' id='imag" + index + "'></div></th>" +
            "<th style='width: 300px'><input type='file' class='form-control upload' accept='image/*' name='prizeImag" + index + "' id='prizeImag" + index + "' ></th>" +
            "</tr>").appendTo("#prize tbody");
        var id = index;
        $("#prizeImag" + id).change(function () {
            var file = document.getElementById("prizeImag" + id).files[0];
            var formData = new FormData();
            formData.append("userNo", storeUserNo);
            formData.append("file", file);
            $.ajax({
                url: "http://localhost:5761/lottery-system-system/system/api/auth/upload/imag",
                // url: "http://localhost:5730/system/api/upload/headImag",
                type: 'POST',
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token", token);
                },
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                async: false,
                success: function (result) {
                    // console.log(result);
                    if (result.code == 200) {
                        //预览图片
                        $("#imag" + id).empty();
                        $("#imag" + id).append("<img src=" + result.data + " alt='profile-photo' class='img-fluid' id='prizeImagUrl" + id + "' name='prizeImagUrl" + id + "'>");
                        document.getElementById("prizeImagUrl" + id).style.cursor = "pointer";
                        document.getElementById("prizeImagUrl" + id).onclick = function () {
                            window.open(result.data);
                        };
                    }
                }
            });
        });
        index++;
    });

    $("#remove").click(function () {
        var num = document.getElementById("prize_tbody").rows.length;
        if (num > 1) {
            document.getElementById("prize_tbody").lastChild.remove();
            index--;
        } else {
            alert("至少保留一行！");
        }
    });

    $("#submit").click(function () {
        var lottery = {
            storeUserNo: storeUserNo,
            lotteryTitle: $("#lotteryTitle").val(),
            startTime: $("#startTime").val().replace("T", " ") + ":00",
            dueTime: $("#dueTime").val().replace("T", " ") + ":00",
            lotteryExplain: $("#lotteryExplain").val(),
            minimumPerson: $("#minimumPerson").val(),
            prizeBOList: []
        };
        var nums = document.getElementById("prize_tbody").getElementsByTagName("tr").length;
        for (var i = 0; i < nums; i++) {
            var prizeLevel = $("#prizeLevel" + i).val();
            var prizeNums = $("#prizeNums" + i).val();
            var prizeContent = $("#prizeContent" + i).val();
            var prizeImagUrl = $("#prizeImagUrl" + i).attr("src");
            var prize = {
                prizeLevel: prizeLevel,
                prizeNums: prizeNums,
                prizeContent: prizeContent,
                prizeImagUrl: prizeImagUrl
            };
            lottery.prizeBOList.push(prize);
        }
        // console.log(lottery);

        $.ajax({
            url: "http://localhost:5761/lottery-system-lottery/lottery/api/auth/lottery/createLottery",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            dataType: "json",
            data: JSON.stringify(lottery),
            success: function (result) {
                // console.log(result);
                if (result.code == 100) {
                    return alert(result.data);
                }
                if (result.code == 200) {
                    alert("创建成功，审核通过后会以邮件的方式通知您");
                    window.location.reload();
                }
            }
        });
    });

    var update_index = null;

    $(document).on("click", ".edit_btn", function () {
        $("#updateModal form")[0].reset();
        $("#update_prize_tbody").empty();
        getLottery($(this).attr("edit_id"));
        $("#updateModal").modal({
            backdrop: "static"
        });
    });

    function getLottery(id) {
        $.ajax({
            url: "http://localhost:5761/lottery-system-lottery/lottery/api/lottery/getLottery/" + id,
            type: "GET",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            success: function (result) {
                // console.log(result);
                $("#update_id").val(result.data.id);
                $("#update_lotteryTitle").val(result.data.lotteryTitle);
                $("#update_startTime").val(result.data.startTime.replace(" ", "T").replace(":ss", ""));
                $("#update_dueTime").val(result.data.dueTime.replace(" ", "T").replace(":ss", ""));
                $("#update_lotteryExplain").val(result.data.lotteryExplain);
                $("#update_minimumPerson").val(result.data.minimumPerson);
                var list = result.data.prizeDTOList;
                $.each(list, function (index, item) {
                    $("<tr>" +
                        "<th style='width: 200px'><input type='text' class='form-control' name='update_prizeLevel" + index + "' id='update_prizeLevel" + index + "'></th>" +
                        "<th style='width: 100px'><input type='number' class='form-control' name='update_prizeNums" + index + "' id='update_prizeNums" + index + "'></th>" +
                        "<th style='width: 450px'><input type='text' class='form-control' name='update_prizeContent" + index + "' id='update_prizeContent" + index + "'></th>" +
                        // <div class='col-lg-9 '><img alt='profile-photo' class='img-fluid'  src=" + item.prizeImagUrl + "></div>
                        // "<th><input type='text' class='form-control' name='update_prizeImagUrl" + index + "' id='update_prizeImagUrl" + index + "'></th>" +
                        "<th style='width: 400px'><div class='col-lg-9 ' id='update_imag" + index + "'><img alt='profile-photo' name='update_prizeImagUrl" + index + "' id='update_prizeImagUrl" + index + "' class='img-fluid'  src=" + item.prizeImagUrl + "></div></th>" +
                        "<th style='width: 300px'><input type='file' class='form-control upload' accept='image/*' name='update_prizeImag" + index + "' id='update_prizeImag" + index + "'></th>" +
                        "</tr>").appendTo("#update_prize tbody");
                    document.getElementById("update_prizeLevel" + index).value = item.prizeLevel;
                    document.getElementById("update_prizeNums" + index).value = item.prizeNums;
                    document.getElementById("update_prizeContent" + index).value = item.prizeContent;
                    document.getElementById("update_prizeImagUrl" + index).value = item.prizeImagUrl;
                    document.getElementById("update_prizeImagUrl" + index).style.cursor = "pointer";
                    document.getElementById("update_prizeImagUrl" + index).onclick = function () {
                        window.open(item.prizeImagUrl);
                    };
                    var id = index;
                    $("#update_prizeImag" + id).change(function () {
                        var file = document.getElementById("update_prizeImag" + id).files[0];
                        var formData = new FormData();
                        formData.append("userNo", storeUserNo);
                        formData.append("file", file);
                        $.ajax({
                            url: "http://localhost:5761/lottery-system-system/system/api/auth/upload/imag",
                            // url: "http://localhost:5730/system/api/upload/headImag",
                            type: 'POST',
                            beforeSend: function (XMLHttpRequest) {
                                XMLHttpRequest.setRequestHeader("token", token);
                            },
                            data: formData,
                            cache: false,
                            contentType: false,
                            processData: false,
                            async: false,
                            success: function (result) {
                                // console.log(result);
                                if (result.code == 200) {
                                    //预览图片
                                    $("#update_imag" + id).empty();
                                    $("#update_imag" + id).append("<img src=" + result.data + " alt='profile-photo' class='img-fluid' id='update_prizeImagUrl" + id + "' name='update_prizeImagUrl" + id + "'>");
                                    document.getElementById("update_prizeImagUrl" + id).style.cursor = "pointer";
                                    document.getElementById("update_prizeImagUrl" + id).onclick = function () {
                                        window.open(result.data);
                                    };
                                }
                            }
                        });
                    });
                });
                update_index = list.length;
            }
        });
    }

    $("#update_add").click(function () {
        $("<tr>" +
            "<th style='width: 200px'><input type='text' class='form-control' name='update_prizeLevel" + update_index + "' id='update_prizeLevel" + update_index + "'></th>" +
            "<th style='width: 100px'><input type='number' class='form-control' name='update_prizeNums" + update_index + "' id='update_prizeNums" + update_index + "'></th>" +
            "<th style='width: 450px'><input type='text' class='form-control' name='update_prizeContent" + update_index + "' id='update_prizeContent" + update_index + "'></th>" +
            "<th style='width: 400px'><div class='col-lg-9 ' id='update_imag" + update_index + "'></div></th>" +
            "<th style='width: 300px'><input type='file' class='form-control upload' accept='image/*' name='update_prizeImag" + update_index + "' id='update_prizeImag" + update_index + "'></th>" +
            "</tr>").appendTo("#update_prize tbody");
        var id = update_index;
        $("#update_prizeImag" + id).change(function () {
            var file = document.getElementById("update_prizeImag" + id).files[0];
            var formData = new FormData();
            formData.append("userNo", storeUserNo);
            formData.append("file", file);
            $.ajax({
                url: "http://localhost:5761/lottery-system-system/system/api/auth/upload/imag",
                // url: "http://localhost:5730/system/api/upload/headImag",
                type: 'POST',
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token", token);
                },
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                async: false,
                success: function (result) {
                    // console.log(result);
                    if (result.code == 200) {
                        //预览图片
                        $("#update_imag" + id).empty();
                        $("#update_imag" + id).append("<img src=" + result.data + " alt='profile-photo' class='img-fluid' id='update_prizeImagUrl" + id + "' name='update_prizeImagUrl" + id + "'>");
                        document.getElementById("update_prizeImagUrl" + id).style.cursor = "pointer";
                        document.getElementById("update_prizeImagUrl" + id).onclick = function () {
                            window.open(result.data);
                        };
                    }
                }
            });
        });
        update_index++;
    });

    $("#update_remove").click(function () {
        var num = document.getElementById("update_prize_tbody").rows.length;
        if (num > 1) {
            document.getElementById("update_prize_tbody").lastChild.remove();
            update_index--;
        } else {
            alert("至少保留一行！");
        }
    });

    $("#update_submit").click(function () {
        var lottery = {
            storeUserNo: storeUserNo,
            lotteryTitle: $("#update_lotteryTitle").val(),
            startTime: $("#update_startTime").val().replace("T", " ") + ":00",
            dueTime: $("#update_dueTime").val().replace("T", " ") + ":00",
            lotteryExplain: $("#update_lotteryExplain").val(),
            minimumPerson: $("#update_minimumPerson").val(),
            prizeBOList: []
        };
        var nums = document.getElementById("update_prize_tbody").getElementsByTagName("tr").length;
        for (var i = 0; i < nums; i++) {
            var prizeLevel = $("#update_prizeLevel" + i).val();
            var prizeNums = $("#update_prizeNums" + i).val();
            var prizeContent = $("#update_prizeContent" + i).val();
            var prizeImagUrl = $("#update_prizeImagUrl" + i).attr("src");
            var prize = {
                prizeLevel: prizeLevel,
                prizeNums: prizeNums,
                prizeContent: prizeContent,
                prizeImagUrl: prizeImagUrl
            };
            lottery.prizeBOList.push(prize);
        }
        // console.log(lottery);

        $.ajax({
            url: "http://localhost:5761/lottery-system-lottery/lottery/api/auth/lottery/updateLottery/" + $("#update_id").val(),
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            dataType: "json",
            data: JSON.stringify(lottery),
            success: function (result) {
                // console.log(result);
                if (result.code == 100) {
                    return alert(result.data);
                }
                if (result.code == 200) {
                    alert("修改成功，审核通过后会以邮件的方式通知您");
                    window.location.reload();
                }
            }
        });
    });

    $(document).on("click", ".record_btn", function () {
        $("#record_table tbody").empty();
        lotteryRecord($(this).attr("record_id"));
        $("#lotteryRecordModal").modal({
            backdrop: "static"
        });
    });

    function lotteryRecord(id) {
        $.ajax({
            url: "http://localhost:5761/lottery-system-lottery/lottery/api/auth/lottery/lotteryRecord/" + id,
            type: "GET",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            success: function (result) {
                // console.log(result);
                var list = result.data;
                $.each(list, function (index, item) {
                    var lotteryTitle = $("<th></th>").append(item.lotteryTitle);
                    var name = $("<th></th>").append(item.name);
                    var lotteryResult = $("<th></th>").append(item.result);
                    var prizeLevel = $("<th></th>").append(item.prizeLevel);
                    var prizeContent = $("<th></th>").append(item.prizeContent);
                    var createTime = $("<th></th>").append(item.createTime);
                    var mobile = $("<th></th>").append(item.mobile);
                    var email = $("<th></th>").append(item.email);
                    $("<tr></tr>").append(lotteryTitle).append(name).append(lotteryResult).append(prizeLevel).append(prizeContent).append(createTime).append(mobile).append(email).appendTo("#record_table tbody");
                });
            }
        });
        $("#exportRecord").click(function () {
            $.ajax({
                url: "http://localhost:5761/lottery-system-lottery/lottery/api/auth/lottery/exportRecord/" + id,
                type: "GET",
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token", token);
                },
                success: function (result) {
                    window.location.href = "http://localhost:5720/lottery/api/auth/lottery/exportRecord/" + id;
                }
            });
        });
    }

    $(document).on("click", ".win_btn", function () {
        $("#win_table tbody").empty();
        winRecord($(this).attr("win_id"));
        $("#lotteryWinModal").modal({
            backdrop: "static"
        });
    });

    function winRecord(id) {
        $.ajax({
            url: "http://localhost:5761/lottery-system-lottery/lottery/api/auth/lottery/lotteryWin/" + id,
            type: "GET",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            success: function (result) {
                // console.log(result);
                var list = result.data;
                $.each(list, function (index, item) {
                    var lotteryTitle = $("<th></th>").append(item.lotteryTitle);
                    var name = $("<th></th>").append(item.name);
                    var prizeLevel = $("<th></th>").append(item.prizeLevel);
                    var prizeContent = $("<th></th>").append(item.prizeContent);
                    var createTime = $("<th></th>").append(item.createTime);
                    var mobile = $("<th></th>").append(item.mobile);
                    var email = $("<th></th>").append(item.email);
                    $("<tr></tr>").append(lotteryTitle).append(name).append(prizeLevel).append(prizeContent).append(createTime).append(mobile).append(email).appendTo("#win_table tbody");
                });
            }
        });
        $("#exportWin").click(function () {
            $.ajax({
                url: "http://localhost:5761/lottery-system-lottery/lottery/api/auth/lottery/exportWin/" + id,
                type: "GET",
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token", token);
                },
                success: function (result) {
                    window.location.href = "http://localhost:5720/lottery/api/auth/lottery/exportWin/" + id;
                }
            });
        });
    }

    $(document).on("click", ".draw_btn", function () {
        var drawLottery = {
            id: $(this).attr("draw_id"),
            storeUserNo: storeUserNo
        };
        $.ajax({
            url: "http://localhost:5761/lottery-system-lottery/lottery/api/auth/lottery/drawLottery",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            dataType: "json",
            data: JSON.stringify(drawLottery),
            success: function (result) {
                alert(result.message);
                // console.log(result);
                return window.location.reload();
            }
        });
    });

</script>

</body>
</html>